<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多选反选例子</title>
    <script src="../js/jquery-2.1.1.min.js"></script>
</head>
<body>
    <input type="button" value="全选" onclick="checkALL()" ／>
    <input type="button" value="反选" onclick="reverseALL()" ／>
    <input type="button" value="取消" onclick="cancleALL()"／>

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox" /></td>
                <td>192.168.6.188</td>
                <td>8888</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>192.168.6.188</td>
                <td>8888</td>
            </tr>
             <tr>
                <td><input type="checkbox" /></td>
                <td>192.168.6.188</td>
                <td>8888</td>
            </tr>
             <tr>
                <td><input type="checkbox" /></td>
                <td>192.168.6.188</td>
                <td>8888</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>192.168.6.188</td>
                <td>8888</td>
            </tr>
        </tbody>


    </table>
    <script>
        function checkALL(){
            $(':checkbox').prop('checked',true) //等同于：$("input[type='checkbox']").prop('checked',true)
        }
        function reverseALL(){
            $(':checkbox').each(function(){  //each这个方法在jquery是把找到的结果遍历一次，搭配this用
                //在函数里面这里的范围，必须要用this
                //简单的三元运算jquery方法 var v=条件？真：假
                var v = $(this).prop('checked')?false:true
                $(this).prop('checked',v);

                /*Jquery方法
                if($(this).prop('checked')){
                    $(this).prop('checked',false);
                }else{
                    $(this).prop('checked',true);
                }*/


                /*Dom实现方式
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }*/
            })
        }
        function cancleALL(){
            $('#tb:checkbox').prop('checked',false)
        }
    </script>


</body>
</html>